<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
      // const app = new Vue({
      //   el: '#app',
      //   data: {
      //     list: [],
      //   },
      //   methods: {},
      //   computed: {
      //     // // 直接当做普通属性调用不加括号
      //     // // 任何data中数据变化立即重新计算
      //     // // 计算属性会缓存
      //     // return 必须retrun结果
      //   },
      //   watch: {
      //     list(v) {
      //       console.log(v, 'v')
      //     },
      //     // 要观察的对象(一般为非DOM事件):function(newVal, oldVal){
      //     // }
      //   },
      //   async created() {
      //     const data = await axios.get('./data.json')
      //     console.log('data:', data)
      //     this.list = data.data
      //   },
      //   mounted() {},
      //   updated() {},
      //   destroyed() {
      //     console.log('')
      //   },
      // })
    </script>
  </body>
</html>
